<template>
  <div class="page-box">
    <div class="page">

      <!--切换按钮-->
      <div class="flex-start tabs">
        <div class="tab" :class="{'active': listActive === 0}" @click="setActive(0)">个人资料</div>
        <!--<div class="tab" :class="{'active': listActive === 1}" @click="setActive(1)">我拉黑的</div>-->
      </div>

      <!--列表-->
      <div class="list-box">

      </div>

    </div>

  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import Https from "@/server";

const listActive = ref(0);
const modelList = ref([]);
const modelTotal = ref(0);

const formData = reactive({
  keyword: "",
  pageNum: 1,
})

const getPageList = () => {
  let data = {
    keyword: formData.keyword,
    pageNum: formData.pageNum,
  };
  Https.getFavoriteList(data).then((res: any) => {
    if (res.code === 0) {
      modelList.value = res.data.list;
      modelTotal.value = res.data.total;
    }
  })
}


const setActive = (item:number)=>{
  if (item != listActive.value){
    listActive.value = item;
    getPageList()
  }
}

onMounted(()=>{
  getPageList();
})

</script>
<style scoped lang="scss">
.page-box{
  height: 100%;

  .page{
    position: relative;
    padding: 0 28px 10px;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    background-color: transparent;
    color: var(--text-color);
  }
}

.tabs{
  padding: 0;
  height: 40px;

  .tab{
    width: 120px;
    font-size: 15px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 36px;
    padding: 0 10px;
    color: var(--text-gray-color);
    background-color: #e9ebf1;
    cursor: pointer;
    margin-top: 3px;
  }

  .tab.active{
    background-color: #fff;
    color: var(--el-color-primary);
    cursor: auto;
    font-size: 16px;
    line-height: 40px;
    margin-top: 0;
  }
}


.list-box {
  padding: 40px 20px 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  min-height: 552px;
}

.list-item {
  width: 20%;
  padding: 0 16px;
  margin-bottom: 30px;
}

</style>